<template>
    <div class="button-group" :style="{backgroundImage: 'url(' + backgroundImage + ')' }">
        <button id="top-id" class="top-button" @click="buttonClicked"/>
        <button id="left-id" class="left-button" @click="buttonClicked"/>
        <button id="middle-id" class="center-button" @click="buttonClicked"/>
        <button id="right-id" class="right-button" @click="buttonClicked"/>
        <button id="bottom-id" class="bottom-button" @click="buttonClicked"/>
    </div>
</template>
<script>
	import bg from '@/assets/images/control_panel_icon.png'

	export default {
		name: 'CloudControlButtons',
		data() {
			return {
				backgroundImage: bg
			}
		},
		methods: {
			buttonClicked(e) {
				const buttonId = e.target.id
				this.$emit('button-move', buttonId)
				switch (buttonId) {
					case 'middle-id':
						break
					case 'top-id':
						break
					case 'left-id':
						break
					case 'right-id':
						break
					case 'bottom-id':
						console.log('点击底部')
						break
					default:
						console.log('错误')
						break
				}
			}
		}
	}
</script>

<style scoped lang="scss">

    .button-group {
        width: 100px;
        height: 100px;
        /*position: absolute;*/
        background-size: 100px 100px;

        .top-button {
            background-color: rgba(0, 0, 0, 0);
            /*color: white;*/
            top: 0;
            left: 25px;
            width: 50px;
            height: 30px;
            position: absolute;
            border: 1px solid rgba(0, 0, 0, 0);
        }

        .left-button {
            background-color: rgba(0, 0, 0, 0);
            /*color: white;*/
            top: 25px;
            left: 0;
            width: 30px;
            height: 50px;
            position: absolute;
            border: 1px solid rgba(0, 0, 0, 0);
        }

        .right-button {
            background-color: rgba(0, 0, 0, 0);
            /*color: white;*/
            top: 25px;
            right: 0;
            width: 30px;
            height: 50px;
            position: absolute;
            border: 1px solid rgba(0, 0, 0, 0);
        }

        .center-button {
            background-color: rgba(0, 0, 0, 0);
            /*color: white;*/
            top: 30px;
            left: 30px;
            width: 40px;
            height: 40px;
            position: absolute;
            border: 1px solid rgba(0, 0, 0, 0);
        }

        .bottom-button {
            background-color: rgba(0, 0, 0, 0);
            /*color: white;*/
            bottom: 0;
            left: 25px;
            width: 50px;
            height: 30px;
            position: absolute;
            border: 1px solid rgba(0, 0, 0, 0);
        }
    }
</style>
